<template>
	<view>
		<view class="text-denglu">
			<u--text text="登录吃了么骑手" size="20px" margin="120rpx 0px 0px 100rpx" bold></u--text>
		</view>
		<view class="view-form">
			<u--form labelPosition="left" ref='myForm' :model="userInfo">
				<u-form-item label="+86>" prop="phone" borderBottom>
					<u--input v-model="userInfo.phone" border="none" placeholder="请输入您的手机号">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>
		</view>
		<view class="text-wenben">
			<text>未注册的手机号验证后自动创建吃了么账户</text>
		</view>
		<view class="checkbox-qishou">
			<u-checkbox-group>
				<u-checkbox shape="square" label=" " size="14px" @change="checkboxChange"></u-checkbox>
				<u--text text="登录代表你已同意美团用户协议,隐私政策,软件使用协议" margin="30rpx 0rpx 0rpx 20rpx" type="info" size="13px">
				</u--text>
			</u-checkbox-group>
		</view>
		<view class="u-page__button-item">
			<u-code ref="uCode1" @change="codeChange1" keep-running change-text="倒计时XS" @start="disabled2 = true"
				@end="disabled2 = false"></u-code>
			<u-button type="primary" @tap="getCode1" :text="tips1" size="small" :disabled="disabled2"></u-button>
		</view>
		<view>
			<u--text text="密码登录" size="12px" margin="40rpx 0px 0px 80rpx" bold type="info"
				@click="checkPasswordLogin"></u--text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			// 验证手机号的规则
			var cheackMobile = (rule, value, cb) => {
				// 手机号一般最小以“13”开头
				const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				if (regMobile.test(value)) {
					return cb()
				}
				cb(new Error('请输入合法的手机号!'))
			}
			return {
				userInfo: {
					phone: '', //手机号
				},
				tips1: '', //发送验证码计时
				disabled2: false, //按钮状态
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							validator: cheackMobile,
							trigger: 'blur'
						}
					]
				},
			}
		},
		onLoad() {
				this.disabled2 = true
			},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.myForm.setRules(this.rules)
			// this.tips1 = '获取验证码'
		},
		methods: {
			  checkboxChange(n) {
			            if(n==false){
							this.disabled2 = true
						}else{
							this.disabled2 = false
						}
			        },
			//页面跳转（手机号密码登录）
			checkPasswordLogin() {
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/passwordLogin'
					})
				}, 1000)
			},
			//获取验证码并跳转页面
			getCode1() {
				if (this.$refs.uCode1.canGetCode) {
					// 向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$myRequest({
						url:'/eat-service/shortMessage/SendVerificationByPhone',
						method:'get',
						data:{
							'phone':this.userInfo.phone,
							'codeMark':'rider'
						},
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode1.start();
					}, 2000);
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/index/index?phone=' + this.userInfo.phone,
						})
					}, 1000)
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			//当按钮发生改变时
			codeChange1(text) {
				this.tips1 = text;
			}
		}
	}
</script>

<style>
	.text-denglu {
		letter-spacing: 3rpx;
		font-family: KaiTi;
	}

	.view-form {
		width: 600rpx;
		margin-top: 30rpx;
		margin-left: 75rpx;
	}

	.u-page__button-item {
		width: 550rpx;
		margin-left: 80rpx;
		margin-top: 100rpx;
	}

	.text-wenben {
		font-size: 12px;
		color: #9B9B9B;
		margin-left: 80rpx;
		margin-top: 10rpx;
	}

	.checkbox-qishou {
		width: 300px;
		margin-left: 80rpx;
		margin-top: 80rpx;
	}
</style>
